<template>
  <section class="todoapp">
    <!-- 头部部分 -->
    <TheHeader :list='renderList' @add='add'></TheHeader>

    <!-- 主体部分 -->
    <TheBody :list='renderList' @changeisDone="changeisDone" @del='del'></TheBody>

    <!-- 底部部分 -->
   <TheFooter :total='total' v-show="list.length" @delAll='delAll' :type='type' @changeType='changeType' :isShow='isShow'></TheFooter>
  </section>
</template>

<script>
import TheHeader from '@/components/TheHeader.vue'
import TheBody from '@/components/TheBody.vue'
import TheFooter from '@/components/TheFooter.vue'
export default {
  watch:{
    list:{
      deep:true,
      immediate:true,
      handler(value){
        localStorage.setItem("list",JSON.stringify(value))
      }
    }
  },
  components:{
    TheHeader,
    TheBody,
    TheFooter
  },
  data () {
  return {
    list: [
      { id: 1, name: '吃饭', isDone: true },
      { id: 2, name: '睡觉', isDone: false },
      { id: 3, name: '打豆豆', isDone: true }
    ],
    type:'all',
  }
},
  methods:{
    changeisDone(id){
      const res = this.list.find(item=>item.id===id)
      res.isDone=!res.isDone
    },
    add(value){
      // console.log(value);
      if (value==='') {
        alert('任务不能是空')
        
      }else{
        const obj = { id: +new Date(), name: value, isDone: false }
      this.list=[obj,...this.list]
      }
      

    },
    del(id){
     this.list=this.list.filter(item=>item.id!==id)
    },
    delAll(){
      this.list=this.list.filter(item=>!item.isDone)
    },
    changeType(value){
      this.type=value

    }
  },
  computed:{
    isShow(){
      return this.list.filter(item=>item.isDone).length
    },
    total(){
      return this.list.filter(item=>!item.isDone).length
    },
    renderList(){
      switch (this.type) {
        case 'all':
          return this.list
         case 'active':
          return this.list.filter(item=>!item.isDone)
           case 'completed':
          return this.list.filter(item=>item.isDone)
          
          
      
        default:
          return this.list
      }
    }
  }

}
</script>

<style></style>
